<template>
  <div class="semicircle row">
    <div class="col-1">
      <label1Vue :data="data1" :height="200"></label1Vue>
    </div>
    <div class="col">
      <label2Vue :data="data2" :height="200"></label2Vue>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from "vue";

import label1Vue from "../../datachar/label1.vue";
import label2Vue from "../../datachar/label2.vue";
import { IDate } from "@/interface";
const p = defineProps<{ char5: IDate[]; char9: IDate[] }>();
const data1 = computed(() => {
  const count = p.char5
    .map((f) => Number(f.count))
    .reduce((a = 0, b = 0) => a + b, 0);
  return p.char5.slice(0, 5).map((z) => {
    return {
      ...z,
      day: z.day.slice(0, 5),
      count: Math.floor((Number(z.count) / count) * 10000) / 100,
    };
  });
});

const data2 = computed(() => {
  return p.char9
    .slice(0, 5)
    .map((z) => {
      const count = p.char9
        .map((f) => Number(f.count))
        .reduce((a = 0, b = 0) => a + b, 0);

      return {
        ...z,
        day: z.day.slice(0, 5),
        count: Math.floor((Number(z.count) / count) * 10000) / 100,
      };
    })
    .sort((a, b) => a.count - b.count);
});
</script>

<style scoped>
.semicircle {
  background: rgba(0, 0, 0, 0.2);
  box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25);
  border-radius: 8px;
  height: 225px;
  margin: 0 auto;
  --bs-gutter-x: 0;
}

.col-1 {
  width: 300px;
}

.col {
  width: 300px;
}
</style>
